<template>
	<view class="count">
		<view class="">


			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
				<view class="bodyb">
					<view v-for="(item,index) in list" :key="index" class="box f">
						<view class="left f f-d-c f-a-c">
							<view class="times">
								<image src="/static/home/10.png" class="timesImg" mode="widthFix"></image>
							</view>
							<view class="leftXian"></view>
						</view>
						<view class="right">
							<view class="topTime f f-a-c f-j-b">
								<view class="time">
									{{$u.timeFormat(new Date(item.recorded_time), 'mm-dd hh:MM')}}
								</view>
								<image src="/static/home/Frame.png" @click="youDian(item)" class="gengduo" mode="">
								</image>
							</view>
							<view class="botBox ">
								<view class="contentNei">
									{{item.content}}
								</view>
								<div v-if="item.images" class=" f f-w-w">
									<view v-for="(iteImg,indImg) in String(item.images).split(',')"
										@click="previewImg(iteImg)" :key="indImg" class="imgs">
										<image :src="iteImg" class="imgImg b-r-20" mode="aspectFill">
										</image>
									</view>
								</div>
								<view class="xian">

								</view>
								<view v-for="(iteFoot,indFoot) in item.projects" :key="indFoot"
									class="boxDefecation f f-a-c f-j-b">
									<view class="defecation">
										{{iteFoot.name}}
									</view>
									<view class="zongse">
										{{iteFoot.value}}({{iteFoot.result}})
									</view>
								</view>

							</view>
							<view class="bai"></view>
						</view>
					</view>
				</view>
				<view v-if="list.length==0" class="zanwu">
					<image src="/static/home/zanwu.png" class="img" mode=""></image>
					<view class="nameImg">
						还没有猫猫的记录哦
					</view>
				</view>
				<view @click="goJi" class="TakeNoteOf f f-a-c f-j-c">
					<image src="/static/home/Frame12.png" class="bijiImg" mode=""></image>
					<view class="name">
						记录
					</view>
				</view>
			</scroll-view>
			<u-popup mode="bottom" border-radius="30" v-model="show">
				<view class="editl">
					<view @click="bianji" class="topLeft">
						编辑
					</view>
					<view @click="detil" class="topLeft">
						删除
					</view>
					<view @click="show=false" class="quxiao">
						取消
					</view>
				</view>
			</u-popup>
			<u-modal v-model="showShoop" @confirm="confirmFns" :show-cancel-button="true" content="确认要删除吗？"></u-modal>
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min.js';
	export default {
		data() {
			return {
				showShoop: false,
				list: [],
				show: false,
				page: 1,
				total: 0,
				item: {}
			}
		},

		onShow() {
			this.list = []
			this.page = 1
			this.show = false
			this.initList()
		},
		onPullDownRefresh() {
			this.list = []
			this.page = 1
			this.show = false
			this.initList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		methods: {
			previewImg(imgurl) {
				uni.previewImage({
					current: imgurl,
					urls: [imgurl]
				});
			},
			async confirmFns() {
				let n = await this.$api.antibodiesWaterRecord({
					id: this.item.id
				})
				this.$msg(n.msg)
				this.showShoop = false
				if (n.code == 200) {
					setTimeout(() => {
						this.show = false
						this.list = []
						this.page = 1
						this.initList()
					}, 1000)
				}
			},
			// 点击编辑
			bianji() {
				// console.log(this.item, '66666666666666666');
				// return
				let m = []
				let n = this.item.images.split(',')
				if (this.item.images) {
					m = n.map(item => {
						return {
							url: item
						}
					})

				}
				uni.navigateTo({
					url: `/pageA/AntibodyLevelRecord?projects=${JSON.stringify(this.item.projects)}&fileList=${JSON.stringify(m)}&textarea=${this.item.content}&pets=${JSON.stringify(this.item.pets)}&content=${this.item.content}&recorded_time=${this.item.recorded_time}&num=2&id=` +
						this.item.id
				})
			},
			// 点击删除
			async detil() {
				this.showShoop = true

			},
			// 初始数据
			async initList() {
				let n = await this.$api.antibodiesVaccine({
					page: this.page
				})
				this.total = n.total
				this.list = [...this.list, ...n.data.rows]
			},
			// 跳转到记录
			goJi() {
				uni.navigateTo({
					url: '/pageA/AntibodyLevelRecord'
				})
			},
			youDian(item) {
				this.show = true
				this.item = item
			},
			onreachBottom() {
				if (this.list.length == this.total) {
					return
				}
				this.page++
				this.initList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zanwu {
		margin-top: 50%;

		.img {
			width: 260rpx;
			height: 180rpx;
			margin-left: 50%;
			transform: translateX(-50%);
		}

		.nameImg {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: center;
			margin-top: 10rpx;
			color: $hui;
		}
	}

	.l_echart {
		padding: 0;
	}

	.topLeft {
		width: 100%;
		height: 108rpx;
		line-height: 108rpx;
		border-bottom: 2rpx solid #f3f1ee;
		text-align: center;
		color: $hei;
		font-size: 28rpx;
		font-weight: 600;
	}

	.quxiao {
		width: 100%;
		height: 138rpx;
		line-height: 108rpx;
		text-align: center;
		color: $hui;
		font-size: 28rpx;
		font-weight: 600;
	}

	.TakeNoteOf {
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 272rpx;
		height: 88rpx;
		background: $brown;
		border-radius: 44rpx;
		box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(151, 121, 97, 0.20);

		.bijiImg {
			width: 34rpx;
			height: 32rpx;
			margin-right: 20rpx;
		}

		.name {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 500;
			text-align: LEFT;
			color: $bai;
		}
	}

	.bodyb {
		padding-bottom: 100rpx;
		margin-top: 60rpx;
	}

	.box {
		width: 90%;
		margin: 0 auto;
		margin-bottom: 20rpx;

		.left {
			margin-right: 25rpx;
			margin-top: 8rpx;

			.times {
				width: 32rpx;
				height: 32rpx !important;
				margin-bottom: 20rpx;

				.timesImg {
					width: 100%;
					height: 100%;
				}
			}

			.leftXian {
				width: 0rpx;
				height: 100%;
				border: 4rpx dashed $f1eeeb;
			}
		}

		.right {
			width: 90%;

			.bai {
				height: 50rpx;
				width: 100%;
			}

			.botBox {
				width: 100%;
				padding: 30rpx;
				background-color: $f7f6f2;
				margin-top: 16rpx;
				border-radius: 24rpx;

				.boxDefecation {
					margin-top: 30rpx;

					.defecation {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-500;
						font-weight: 600;
						text-align: LEFT;
						color: $hei;

						text {
							color: $hui;
							margin-left: 10rpx;
							font-size: 22rpx;
						}
					}

					.zongse {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-500;
						font-weight: 600;
						text-align: LEFT;
						color: $brown;
					}
				}

				.xian {
					width: 100%;
					height: 0rpx;
					border: 1rpx dashed #ebe2da;
					margin: 24rpx 0;
				}

				.imgs {
					width: 144rpx;
					height: 144rpx;
					margin-top: 16rpx;
					border-radius: 16rpx;
					margin-right: 10rpx;
					// margin-bottom: 10rpx;

					.imgImg {
						width: 100%;
						height: 100%;
						// object-fit: cover;
					}


				}

				.contentNei {

					word-wrap: break-word;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					text-align: LEFT;
					color: $hei;
					margin-top: 15rpx;
				}

				.topAva {

					.avatav {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
					}

					.name {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-500;
						font-weight: 600;
						text-align: LEFT;
						color: $hei;
						margin-left: 20rpx;
					}
				}
			}

			.topTime {
				font-size: 32rpx;
				font-family: 'HarmonyOS Sans Bold';
				font-weight: 700;
				text-align: LEFT;
				color: #2f2319;
			}

			.gengduo {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.ring-chart {
		width: 90%;
		margin: 0 auto;
		background: #fffefc;
		border: 1rpx solid #f1eeeb;
		border-radius: 24rpx;
		box-shadow: 0rpx 12rpx 64rpx 0rpx rgba(151, 121, 97, 0.07);
		margin-top: 30rpx;
		padding: 0 20rpx;

		.ci {
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: LEFT;
			color: $hui;
			// padding-left: 20rpx;
			padding-top: 20rpx;
		}
	}

	.top {
		width: 90%;
		margin: 0 auto;

		.right {
			.analysis {
				width: 144rpx;
				height: 64rpx;
				line-height: 64rpx;
				border: 1rpx solid $brown;
				border-radius: 33rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: center;
				color: $brown;
				margin-left: 20rpx;
			}

			.timeBox {
				width: 204rpx;
				height: 64rpx;
				border: 1rpx solid #ebe2da;
				border-radius: 33rpx;
				font-size: 22rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: center;
				color: $hei;

				.moreImg {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}
		}

		.left {

			.defecate {
				width: 112rpx;
				height: 64rpx;
				line-height: 64rpx;
				border: 1rpx solid #ebe2da;
				border-radius: 33rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 500;
				text-align: center;
				color: $hei;
				margin-right: 20rpx;
			}
		}
	}

	.active {
		border: none;
		background-color: #f4efea;
		color: $brown !important;
	}

	.count {
		overflow-y: auto;
		height: 100vh;
		width: 100%;
		background-color: #fffefc;
	}
</style>